<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">
      <i class="far fa-folder"></i> <span class="mx-3">Create a new folder</span>
    </h4>
    <button type="button" class="close" aria-hidden="true" (click)="activeModal.dismiss('Cross click')">×</button>
  </div>
  <form [formGroup]="basicForm">
    <div class="modal-body">
      <div class="form-group">
        <label for="folderNameInput">Folder Name: <span class="required">*</span></label>
        <input type="text" formControlName="name" class="form-control"
               [ngClass]="{ 'is-valid': name.valid && (name.dirty || name.touched),
                 'is-invalid': name.invalid && (name.dirty || name.touched) }"
               id="folderNameInput" required>
        <small id="folderNameInputHelp" class="form-text text-muted">Folder name must be unique</small>
        <div *ngIf="name.invalid && (name.dirty || name.touched)"
             class="invalid-feedback">
          <div class="float-right" *ngIf="name.errors.required">
            Name is required.
          </div>
          <div class="float-right" *ngIf="name.errors.nameAlreadyTaken">
            A folder with this name already exists.
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary mr-1" (click)="activeModal.close(false)">Cancel</button>
      <button type="button" class="btn btn-primary" [disabled]="!name.valid"
              (click)="createFolder()">OK</button>
    </div>
  </form>
</div>
